$(function () {
    // console.log('ok');
    //1- 获取跳转过来id的值----------
    var id = location.search.substring(1).split('=')[1];
    // console.log(id);

    // 2-初始化下拉列表------------
    initCate()
    // 1展示所有分类到下拉列表
    function initCate() {
        $.ajax({
            url: '/my/article/cates',
            method: 'get',
            success: function (res) {
                console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                };
                // 渲染下拉列表（添加模板引擎）
                var htmlStr = template('tpl-cate', res)
                // console.log(htmlStr);
                // 添加到select表单
                $('[name=cate_id]').html(htmlStr);
                // 因为是动态插入的所以layui不能自动化渲染，下面手动渲染
                layui.form.render();
                // 渲染完分类以后根据id 调接口获取数据并渲染到页面
                initArticle();
            }
        })
    }

    // 3-初始化富文本编辑器-----------
    initEditor();

    // 4-初始化图片裁剪区------------
    var $image = $('#image')
    // 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 初始化裁剪区域
    $image.cropper(options)

    // 5根据id 调接口获取数据并渲染到页面-------
    // initArticle() 不在这里调用这个函数了，因为上面已经发送过一次ajax请求了

    function initArticle() {
        $.ajax({
            url: '/my/article/' + id,
            method: 'get',
            success: function (res) {
                console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                // 渲染到页面
                layui.form.val('form-edit', res.data)
                // 利用富文本编辑器自带插件给textarea赋值
                tinyMCE.activeEditor.setContent(res.data.content)
                // 渲染图片到裁剪区
                // $image.attr('src', 'http://api-breakingnews-web.itheima.net' + res.data.cover_img)
                $image
                    .cropper('destroy') // 销毁旧的裁剪区域
                    .attr('src', 'http://api-breakingnews-web.itheima.net' + res.data.cover_img) // 重新设置图片路径
                    .cropper(options) // 重新初始化裁剪区域
            }
        })
    }

    //5 处理文章封面-----------
    // 5-1点击选择按钮弹出选择框
    $('#btnChooseImage').on('click', function () {
        $('#coverFile').click();
    })

    //5-2选择了新图片则更换裁剪区的图片
    $('#coverFile').on('change', function () {
        // jq对象转换为dom对象【0】
        var files = $(this)[0].files;
        if (files.length === 0) {
            return layui.layer.msg('请上传文件')
        }
        var file = files[0];
        // 把文件转换为可访问的路径
        var newImgURL = URL.createObjectURL(file)
        // console.log(newImgURL);
        //添加路径
        // $('#image').attr('src', newImgURL)
        // 跟换图片并重新渲染裁剪区
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    // 6 编辑文章-----------
    $('#form-edit').on('submit', function (e) {
        e.preventDefault();
        //接口要求的数据是formDate格式
        var fd = new FormData($(this)[0]);
        fd.append('Id', id);
        /* fd.forEach(function (value) {
            console.log(value);
        }) */
        // 裁剪图片添加到fd中
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 把生成的文件追加到fd中
                fd.append('cover_img', blob)
                // 调接口更新文章
                updateArticale(fd)
            })        
    })
    function updateArticale(fd) {
        $.ajax({
            url: '/my/article/edit',
            method: 'post',
            data: fd,
            // 因为是formdate格式所以必须加请求头
            contentType: false,
            processData:false,
            success: function (res) {
                console.log(res);
                if (res.status!==0) {
                    return layui.layer.msg(res.message,{icon:5})
                }
                layui.layer.msg('编辑文章成功', { icon: 6 }, function () {
                    location.href='/article/art_list.html'
                })
            }
        })
    }
})